<template>
	<view class="flex_ZC">
		<uNavbar></uNavbar>

		<view class="logo flex_c">
			<image :src="baseUrl +'/static/image/logo.png'" mode="aspectFill"></image>
		</view>

		<view class="modular_box mart50 flex_ZC">
			<view class="binding mart50 flex_dq">
				<u-input type="number" placeholder="请输入手机号" clearable border="bottom" maxlength="11" fontSize='16'
					:placeholderStyle="placeholder" v-model.trim="phone">
					<text slot="prefix" class="slots">+86</text>
				</u-input>
			</view>
			<view class="binding mart50 flex_dq">
				<u-input placeholder="请输入验证码" border="bottom" maxlength="6" fontSize='16'
					:placeholderStyle="placeholder" v-model.trim="validateCode">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" keep-running changeText="X秒重新获取"></u-code>
						<u-button @tap="varify2()" :text="tips" type="success" size="mini"></u-button>
					</template>
				</u-input>
			</view>
			<view class="binding mart50 flex_dq" v-if="inviteCode">
				<u-input type="text" placeholder="请输入邀请码（非必填）" clearable border="bottom" maxlength="32" fontSize='16'
					:placeholderStyle="placeholder" v-model.trim="inviteCode">
				</u-input>
			</view>

		</view>
		<view class="signIn1 mart64 flex_c" @click="isComplete">
			<text>登录</text>
		</view>

		<!-- 协议 -->
		<view class="information ">
			<view class="zhengce " @click="toggleAgree">
				<image :src="baseUrl +'/static/icon/i_wxz.png'" mode="aspectFill" v-if="!selectStatus"></image>
				<image :src="baseUrl +'/static/icon/i_xz.png'" mode="aspectFill" v-if="selectStatus"></image>
			</view>
			<view class="information_box">
				<text>未注册手机号登录时将自动注册。登录即代表同意</text>
				<text class="underline clause" @click.stop="serviceAgreements">《服务条款》</text>
				<text>和</text>
				<text class="underline clause" @click.stop="privacyPolicy">《隐私政策》</text>
				<text>,并授权福叠猫平台使用此账号进行统一管理</text>
			</view>
		</view>

		<view class="register " @click="goRegister">
			<text>密码登录</text>
			<u-icon name="arrow-right" size="16" color="#999999"></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		mobileLogin
	} from "../../api/login.js"
	import {
		sendSmsCode
	} from "../../api/user.js"
	export default {
		data() {
			return {
				baseUrl: this.$imageBaseUrl,
				tips: '',
				phone: '', //手机号
				validateCode: '', //验证码
				placeholder: 'color:#999999',
				randstr: "",
				aaaaaa: '',
				ticket: "",
				inviteCode: '', //邀请码
				noPhpne: true,
				check: false, //监听用户是否输入内容
				isyzm: false,
				selectStatus: false, //选中状态
				wxlogin: false

			}
		},
		onLoad(e) {
			console.log(e);
			if (e && e.wxlogin) {
				this.wxlogin = e.wxlogin
			}
			this.noPhpne = e.noPhpne
			// console.log(uni.getStorageSync('inviteCode'));
			if (uni.getStorageSync('inviteCode')) {
				this.inviteCode = uni.getStorageSync('inviteCode')
			}
		},
		// 监听事件
		watch: {
			phone(val) {
				if (uni.$u.test.mobile(this.phone)) {
					this.check = true
				} else {
					this.check = false
				}
			},
			validateCode(val) {
				if (!uni.$u.test.isEmpty(this.validateCode)) {
					this.check = true
				} else {
					this.check = false
				}
			},
		},
		methods: {
			wxdl() {
				uni.login({
					provider: 'weixin',
					success: function(event) {
						const {
							code
						} = event
						console.log(code);
						this.aaaaaa = code;
					}
				});
			},
			// 协议
			toggleAgree() {
				this.selectStatus = !this.selectStatus
			},
			callback2(res) {
				let that = this
				that.isyzm = false
				let r = res.detail.data[0].res;
				if (r.ret === 0) {
					that.randstr = r.randstr
					that.ticket = r.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去

				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
				console.log(1111111111, r);
			},
			callback(res) {
				// 用户操作验证码或者关闭刷新腾讯返回的内容 
				let that = this
				if (res.ret === 0) {
					that.randstr = res.randstr
					that.ticket = res.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去

				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			varify2() {
				// #ifdef H5
				if (uni.$u.test.isEmpty(this.phone)) {
					uni.$u.toast('请输入您的手机号');
				} else {
					this.varify()
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.getCode()
				// #endif
			},
			varify() {
				let appid = '192455824'; // 腾讯云控制台中对应这个项目的 appid
				//生成一个滑块验证码对象
				let captcha = new TencentCaptcha(appid, this.callback);
				// 滑块显示
				captcha.show();

			},
			codeChange(text) {
				this.tips = text;
			},
			// 验证码
			getCode() {
				let that = this;
				let data = {
					mobile: that.phone,
					template_code: 'user_register',
					rand_str: that.randstr,
					ticket: that.ticket,
				}
				sendSmsCode(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						if (that.$refs.uCode.canGetCode) {
							that.$refs.uCode.start();
						}
					}
				})
			},
			// 完成
			isComplete() {
				let that = this;
				if (!this.selectStatus) {
					uni.$u.toast('请勾选用户协议!');
					return;
				}
				if (!uni.$u.test.mobile(this.phone)) {
					uni.$u.toast('请输入正确的手机号');
					return;
				}
				if (!uni.$u.test.code(this.validateCode, 6)) {
					uni.$u.toast('验证码错误');
					return;
				}
				that.signLogin()
			},
			signLogin(code) {
				let data = {
					mobile: this.phone,
					sms_captcha_code: this.validateCode,
					agreement: this.selectStatus,
					invite_code: this.inviteCode || uni.getStorageSync("inviteCode"),
					login_code: code,
					seller_id: uni.getStorageSync("seller_id") || "",
					mask: 1,
					red_id:uni.getStorageSync("red_id")||""
				}
				mobileLogin(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						uni.setStorageSync('token', res.data.token)
						console.log(uni.getStorageSync("quick_pay"));
						if (uni.getStorageSync("quick_pay")) {
							let url = uni.getStorageSync("quick_pay")
							setTimeout(function() {
								uni.redirectTo({
									url: url
								})
							}, 1500);
						} else {
							let urls = uni.getStorageSync("urls")
							if(urls){
								console.log('返回登录之前的页面---',urls);
								uni.removeStorageSync('urls');
								setTimeout(function() {
									uni.redirectTo({
										url:urls
									})
								}, 1500);
							}else{
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/index/cloudCatIndex'
									})
								}, 1500);
							}
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			// 服务协议
			serviceAgreements() {
				uni.navigateTo({
					url: '/pageUser/myuser/servicerule'
				})
			},
			// 隐私协议
			privacyPolicy() {
				uni.navigateTo({
					url: '/pageUser/myuser/privacyrule'
				})
			},
			goRegister() {
				uni.redirectTo({
					url: '/pageLogin/login/phonePwdLogin'
				})
			},
		},
	}
</script>

<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.logo {
		width: 690rpx;
		margin-top: 270rpx;
	}

	.logo>image {
		width: 226rpx;
		height: 242rpx;
	}

	.modular_box {
		width: 92%;
		position: relative;
	}

	.mart50 {
		margin-top: 50rpx;
	}

	.binding {
		width: 90%;
	}

	.signIn1 {
		width: 690rpx;
		height: 80rpx;
		color: #ffffff;
		background: linear-gradient( 180deg, #FD9609 0%, #FFBA02 97%);
		border-radius: 36rpx;
		font-size: 32rpx;
	}

	.mart64 {
		margin-top: 64rpx;
	}

	.information {
		display: flex;
		width: 690rpx;
		margin-top: 68rpx;
	}

	.information_box {
		margin-left: 14rpx;
	}

	.information_box>text {
		color: #999999;
		font-size: 24rpx;
	}

	.clause {
		color: #FFC300 !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.slots {
		font-size: 32rpx;
		color: #333333;
		margin-right: 10rpx;
	}

	.register {
		display: flex;
		align-items: baseline;
		justify-content: center;
		width: 100%;
		/* position: fixed; */
		/* bottom: 50rpx; */
		margin-top: 300rpx;
		font-size: 30rpx;
		color: #999999;
	}

	/deep/.u-button--success {
		background: none !important;
		border: none !important;
		color: #FFC300 !important;
	}

	/deep/.u-button__text {
		font-size: 28rpx !important;
	}
</style>